<template>
	<view class="new_order_page">
		<view class="top">
			<view class="item" :class="showStep >= 1? 'active': ''">
				<text class="num">1</text>
				<text class="title">录入信息</text>
			</view>
			<view class="item" :class="showStep >= 2? 'active': ''">
				<text class="line" ></text>
			</view>
			<view class="item" :class="showStep >= 2? 'active': ''">
				<text class="num" >2</text>
				<text class="title">上传附件</text>
			</view>
			<view class="item" :class="showStep >= 3? 'active': ''">
				<text class="line"></text>
			</view>
			<view class="item" :class="showStep >= 3? 'active': ''">
				<text class="num">3</text>
				<text class="title">完成录单</text>
			</view>
		</view>
		<!-- 录入信息板块 -->
		<view class="con">
			<scroll-view class="scroll-y padtop"  scroll-y="true" :scroll-top="scrollTop" @scroll="scroll">
				<view v-if="showStep ==1">
					<!-- 选择订单类型板块 -->
					<view class="order_nav clearfix" >
						<view class="title">
							请选择录入订单类型
						</view>
						<view class="nav_item">
							<text class="item" :class="item.id == orderItemActive ? 'active': '' " 
								v-for="item in orderItem" :key="item.id" :data-id="item.id" @click="itemOnClick"
								>{{item.productName}}</text>
						</view>
					</view>
					<view class="miaoshu" v-if="generalizeSaveName">
						<view class="miaoshutext1">分享推广图，让客户主动找到</view>
						<view class="miaoshutext2">图片已带专属推广码</view>
						<!-- #ifdef H5 -->
							<a class="miaoshutext3"  @click="downImg">下载推广图自动进件</a>
						<!-- #endif -->
						<!-- #ifndef H5 -->
							<view @click="downFile" class="miaoshutext3">下载推广图自动进件</view>
						<!-- #endif -->
					</view>
					<view class="shuoming ">
						<view class="smxiangqing proDet clearfix">
							<block v-if="moveSpecialCode!== null">
								<rich-text :nodes="moveSpecialCode"></rich-text>
							</block>
						</view>
					</view>
					<!--产品描述-->
					<!--end产品添加-->
					<view class="newOrderWrap">
						<zzdTemplate v-if="orderProductId == 0"  @postOrderInfo="newOrderInfo" :isNew="isNew"></zzdTemplate>
						<ajfTemplate v-if="orderProductId == 2"  @postOrderInfo="newOrderInfo" :form1 = "form1" :isNew="isNew"></ajfTemplate>
						<accTemplate v-if="orderProductId == 1"  @postOrderInfo="newOrderInfo" :isNew="isNew"></accTemplate>
						<ajslTemplate v-if="orderProductId == 3" @postOrderInfo="newOrderInfo" :isNew="isNew"></ajslTemplate>
						<fpfTemplate v-if="orderProductId == 4" @postOrderInfo="newOrderInfo" :isNew="isNew"></fpfTemplate>
					</view> 
					<!--end产品添加-->
				</view>
				<!--start 上传图片-->
				<view class="img_upload_wrap clearfix" v-if="showStep ==2">
					<uploadImg :flieList="flieList" @changeStep="changeShowStep" :orderNumber="orderNumber" :productId="productId" :isNew="isNew"></uploadImg>
				</view>
				<!--end 上传图片-->
				<view class="result_wrap" v-if="showStep == 3">
					<view style="width:100%;text-align:center">
						<image src="/static/public/ldcg.png" class="cgimg"></image>
					</view>
					<view style="width:100%;text-align:center">
						<view class="cgtext">录单成功</view>
					</view>
					<view class="btn">
						<button class="cgbtn" @click="goToOrder">查看订单</button >
						<button class="cgbtn" @click="backIndex">回到首页</button >
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';

	//获取子组件
	import zzdTemplate from './orderTemplate/zzd.vue';
	import ajfTemplate from './orderTemplate/ajf.vue';
	import accTemplate from './orderTemplate/accfund.vue';
	import ajslTemplate from './orderTemplate/ajsl.vue';
	import lebTemplate from './orderTemplate/leb.vue';
	import fpfTemplate from './orderTemplate/fpf.vue';
	import uploadImg from'./orderTemplate/uploadImg.vue';
	export default {
		data() {
			return {
				orderNumber: null,
				productId: null,
				isNew: true,
				orderItem:[],
				orderItemActive:null,
				//当前步骤
				showStep: 1,
				//当前产品模板id
				orderProductId: null,
				moveSpecialCode: null,
				//展示推广
				generalizeSaveName: null,
				//推广图Url
				ImgUrl:null,
				form1: {
					brokerMin: null,
					brokerMax: null,
					intentionAddMoney: null,
					brokerType: null,
					brokerRatio: null,
					empClass: null
				},
				flieList: [],
				scrollTop: 0,
				old:{
					scrollTop: 0,
				}
			}
		},
		components: {
			zzdTemplate,
			ajfTemplate,
			accTemplate,
			ajslTemplate,
			lebTemplate,
			uploadImg,
			fpfTemplate
		},
		computed: {
			...mapState(["userInfo"]),
		},
		onLoad(option) {
			if(option.fapai){
				this.getOrderNavSbu(option.id)
			}else{
				this.getOrderNav(option.id);
			}
		},
		methods: {
			//修改滚动跳
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			changTop() {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			//回到首页
			backIndex() {
				uni.switchTab({
				    url: '/pages/index/index',
				})
			},
			//查看订单
			goToOrder () {
				uni.redirectTo({
				    url: "/pages/addOrder/reviewOrder?id=" + this.orderNumber
				});
			},
			//提交基本信息
			newOrderInfo(obj){
				obj.productId = uni.getStorageSync("productId");
				this.$api.newOrderInfo(obj).then( res=> {
					if(res.data.code == "200"){
						this.orderNumber = res.data.data;
						this.showStep = 2;
						this.changTop();
					}
				}).catch(err => {
					console.log(err)
				})
				
			},
			//修改步骤
			changeShowStep(step) {
				this.showStep = step
			},
			//获取栏目分类
			getOrderNav(id){
				this.$api.getOrderNav().then( res => {
					this.orderItem = res.data.data;
					this.showStep = 1;
					this.orderItemActive = id || this.orderItem[0].id;
					//根据产品id获取介绍
					this.getOrderIntroduce(id);
				}).catch(err => {
					console.log(err)
				})
			},
			//法拍房栏目分类
			getOrderNavSbu(id){
				this.$api.getOrderNavSub(id).then( res => {
					this.orderItem = res.data.data;
					this.showStep = 1;
					this.orderItemActive = id || this.orderItem[0].id;
					//根据产品id获取介绍
					this.getOrderIntroduce(id);
				}).catch(err => {
					console.log(err)
				})
			},
			//订单分类点击事件
			itemOnClick(e) {
				let id = e.target.dataset.id ||e.currentTarget.dataset.id;
				this.orderItemActive = id;
				this.getOrderIntroduce(id);
			},
			//获取产品介绍
			getOrderIntroduce(id){
				let productId = id ||this.orderItem[0].id;
				this.productId = productId;
				uni.setStorageSync("productId", productId);
				this.$api.getOrderIntroduce(productId).then(res=>{
					let resData = res.data.data;
					this.moveSpecialCode = resData.moveSpecialCode;
					this.orderProductId = resData.minProcedureCode;
					this.generalizeSaveName = resData.generalizeSaveName;
					//佣金预计需要的数据
					let empClass = this.userInfo.empClass;
					if(empClass == 1){
						this.form1.brokerMin = resData.employeeMin;
						this.form1.brokerMax = resData.employeeMax;
						this.form1.intentionAddMoney = resData.employeeSubjoin;;
						this.form1.brokerType =  resData.employeeType;
						this.form1.brokerRatio =  resData.employeeRatio;
						this.form1.empClass = empClass;
					}else{
						this.form1.brokerMin = resData.brokerMin,
						this.form1.brokerMax = resData.brokerMax,
						this.form1.intentionAddMoney = resData.brokerSubjoin,
						this.form1.brokerType = resData.brokerType,
						this.form1.brokerRati = resData.brokerRatio,
						this.form1.empClass = empClass
					}
				}).catch(error=>{
					console.log(error)
				})
			},
			//获取推广图Url
		 	async getOrderImgUrl(id) {
				let resData = await this.$api.getOrderImgUrl(id);
				return resData;
			},
			//h5下载路径
			async downImg() {
				let	res = await this.getOrderImgUrl(this.orderItemActive);
				let imgUrl = res.data.data;
				var oA = document.createElement("a"); 
				oA.href = imgUrl; 
				oA.target = "_blank";
				oA.click();  
				document.body.appendChild(oA);  
				oA.remove(); 
			},
			//APP保存推广图
			async downFile() {
				let	res = await this.getOrderImgUrl(this.orderItemActive);
				let imgUrl = res.data.data;
				uni.downloadFile({
				    url:imgUrl,
				    success: (res) => {
				      if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								})
							},
							fail: () => {
								uni.showToast({
									title: '保存失败',
									icon: 'none'
								})
							}
						})
				        // uni.saveFile({
				        //   tempFilePath: res.tempFilePath,
				        //   success: (resData) => {
				        //     uni.openDocument({
				        //       filePath: resData.savedFilePath,
				        //     });
				        //   },
				        // });
				      }
				    },
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	/* #ifndef APP-PLUS */
	page {
	    width: 100%;
		height: 100%;
		background: #F5F5F5;
	}
	/* #endif */
	.new_order_page{
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
		/* #ifndef APP-PLUS */
		height: 100%;
		/* #endif */
	}
	.top{
		height: 184rpx;
		width: 100%;
		background: #FFFFFF;
		padding: 38rpx 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.top .item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		.num{
			display: inline-block;
			width: 46rpx;
			height: 46rpx;
			background-color: #DDDDDD;
			color: #FFFFFF;
			border-radius: 50%;
			text-align: center;
			line-height: 46rpx;
			font-size: 24rpx;
		}
		.title{
			font-family: PingFang-SC-Medium;
			font-size: 26rpx;
			font-weight: normal;
			font-stretch: normal;
			color: #999999;
			margin-top: 20rpx;
			font-weight: bolder;
		}
		.line{
			width: 136rpx;
			height: 2rpx;
			background: #DDDDDD;
			margin-top: -50rpx;
		}	
	}
	
	.top .item.active .num{
		background: #52aaf8;
	}
	.top .item.active .title{
		color: #333333;
	}
	.top .item.active .line{
		background: #52aaf8;
	}
	.con{
		flex: 1;
		overflow: hidden;
	}
	.scroll-y{
		height: 100%;
		width: 750rpx;
	}
	.order_nav{
		background: #FFFFFF;
		padding: 20rpx 48rpx 10rpx 48rpx;
		.title{
			font-size: 32rpx;
			line-height: 40rpx;
			color: #333333;
			margin-bottom: 20rpx;
		}
		.item{
			padding: 8rpx 34rpx;
			color:#333333 ;
			font-size: 28rpx;
			margin: 0 20rpx 20rpx 0;
			float: left;
			border-radius: 28px;
			background: rgba(#f3f8ff,1);
		}
		.item.active{
			color: #FFFFFF;
			background: #52aaf8;
		}
	}
	.miaoshu {
		width: 100%;
		padding: 50rpx 0;
		background-color: white;
		margin-top: 20rpx;
		text-align: center;
		.miaoshutext1 {
			font-size: 16px;
			font-weight: bold;
			color: #333333;
		}
		.miaoshutext2 {
			font-size: 14px;
			font-weight: Medium;
			color: #333333;
			margin: 25rpx 0;
		}
		.miaoshutext3 {
			display: inline-block;
			width: 330rpx;
			background-color: #52AAF8;
			color: white;
			font-size: 14px;
			margin: 0 auto;
			border-radius: 25px;
			height: 56rpx;
			line-height: 56rpx;
		}
	}
	.shuoming {
		width: 100%;
		padding: 0 30rpx 30rpx 30rpx;
		background-color: white;
		.proDet{
			background: #f9fbff;
			margin: unset !important;
		}
	}
	.img_upload_wrap{
		background: #FFFFFF;
		padding-top: 20rpx;
	}
	.result_wrap{
		height: 100%;
		background: #FFFFFF;
		padding-top: 40rpx;
		.cgimg {
		    width: 355rpx;
		    height: 285rpx;
		}
		
		.cgtext {
		    color: #333333;
		    font-size: 16px;
		    margin-top: 34rpx;
		    text-align: center;
		}
		
		.btn {
		    text-align: center;
		    width: 100%;
		    margin-top: 50rpx;
		}
		
		.cgbtn {
			margin: 0 auto 40rpx;
		    color: white;
		    background-color: #52AAF8;
		    font-size: 18px;
		    width: 300rpx;
		    height: 80rpx;
		    text-align: center;
		    line-height: 80rpx;
		    border-radius: 25px;
		}
	}
</style>
